<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链式运动(改造)</title>
		<style type="text/css">
			div{width: 100px; height: 100px; background-color: blue; margin: 50px; opacity: 0.3; filter: alpha(opacity=30);}
		</style>
		<script type="text/javascript">
			// currentStyle   /kɜːrənt  staɪl/
			// getComputedStyle    /ɡet  kəmˈpjuːtɪd  staɪl/ 
			// parseInt       /pɑːrs  ɪnt /
			// ceil           /siːl/
			// floor          /flɔː(r)/
			// parseFloat     /pɑːrs  fləʊt/
					
			window.onload = function(){
				oDiv = document.getElementById("div1");
				
				oDiv.onmouseover = function(){
					stratMove(this, {
						width: 600,
						height: 300,
						opacity: 100
					},
					function(){
						alert("所有运动都结束了");
					});
				}
				
				oDiv.onmouseout = function(){
					stratMove(this, {
						width: 100,
						height: 100,
						opacity: 30
					});
				}
			}
			
			function getStyle(node, cssStyle){
				return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle]; 
			}                                                       
			
			/*
				回调函数：我们把函数当做参数传入，并且在适合的时机调用该函数的方式，叫做回调函数，在别的编程语言叫做指针函数
			*/
			
			function stratMove(node, cssObj, complete=null){
				clearInterval(node.timer);
				
				node.timer = setInterval(function(){
					var isEnd = true;    //假设所有运动都达到目标值
					for(let attr in cssObj){
						var iCur = null;
						var myTarget = cssObj[attr];
						
						if(attr == "opacity"){
							iCur = parseInt(parseFloat(getStyle(node, attr)) * 100);
						}
						else{
							iCur = parseInt(getStyle(node, attr));
						}
						
						var speed = (myTarget - iCur) / 8;
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
						
						if(attr == "opacity"){
							iCur += speed;
							node.style.opacity = iCur / 100;
							node.style.filter = `alpha(opacity=${iCur})`;
						}
						else{
							node.style[attr] = iCur + speed + "px";
						}
						
						if(iCur != myTarget){
							isEnd = false;
						}
					}
					
					if(isEnd){
						clearInterval(node.timer);
						
						if(complete){
							complete.call(node);
						}
					}
				}, 30);
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>
